<template>
  <div class="container">
    <div class="app-container">
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="requestParameters"
        ref="requestParameters"
        size="small"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input
            v-model="requestParameters.subjectName"
            @keyup.enter="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click="resetForm('requestParameters')"
          >清除</el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleFilter"
          >搜索</el-button>
        </el-form-item>
        <el-button
          class="filter-item fr"
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="handleChange('add')"
        >新增用户</el-button>
      </el-form>

      <!-- 数据记录 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- end -->

      <!-- 数据列表 -->
      <el-table
        :key="tableKey"
        :data="list"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column label="学科名称"> <template slot-scope="scope">
            <span>{{scope.row.subjectName}}</span>
          </template> </el-table-column>
        <el-table-column label="创建者"> <template slot-scope="scope">
            <span>{{scope.row.username}}</span>
          </template> </el-table-column>
        <el-table-column label="创建日期"> <template slot-scope="scope">
            <span>{{scope.row.addDate|parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示"> <template slot-scope="scope">
            <span>{{scope.row.isFrontDisplay===0?'否':'是'}}</span> </template>
        </el-table-column>
        <el-table-column label="二级目录"> <template slot-scope="scope">
            <span>{{scope.row.twoLevelDirectory}}</span></template>
        </el-table-column>
        <el-table-column label="标签"> <template slot-scope="scope">
            <span>{{scope.row.tags}}</span>
          </template> </el-table-column>
        <el-table-column label="题目数量">
          <template slot-scope="scope">
            <span>{{scope.row.totals}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          width="230px"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              @click="$router.push({path: 'directorys'})"
            >学科分类</el-button>
            <el-button
              type="text"
              @click="$router.push({path: 'tags'})"
            >学科标签</el-button>
            <el-button
              type="text"
              @click="handleChange(row.id)"
            >修改</el-button>
            <el-button
              type="text"
              @click="removeSubject(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          style="text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :total="total"
          :page-size="requestParameters.pagesize"
          :page-sizes="[10,20,30, 50]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
    <Dialog
      ref="editsubject"
      :titleInfo="titleInfo"
      :formBase="formData"
      v-on:newDataes="getList"
    ></Dialog>
  </div>

</template>

<script>

import { detail, list, remove, simple, add, update } from "@/api/hmmm/subjects"
import Dialog from '@/module-hmmm/components/subjects-add'

export default {
  data () {
    return {
      alertText: '',
      tableKey: 0,
      list: [],
      name: '',
      listLoading: true,
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 10,
      },
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        subjectName: '',
        isFrontDisplay: true
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 渲染数据
    async getList (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      this.list = res.items;
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    removeSubject (id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.list.splice(id, 1)
              this.getList(this.requestParametersges)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    //清除
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getList(this.requestParameters)
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },

    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },

    query () {
      this.formData = {}
    },

    // 新增学科
    handleChange (id) {
      this.query()
      if (id === 'add') {
        this.titleInfo.text = '新增学科'
      } else {
        this.titleInfo.text = '修改学科'
        this.hanldeEditForm(id)
      }
      this.$refs.editsubject.btnOk()
    },

    async hanldeEditForm (objectId) {
      this.formData.id = objectId
      const { data: res } = await detail({ id: objectId })
      // 获取详情 给formData
      this.formData = res
    },


  },
  components: {
    Dialog
  },
  created () {
    this.getList()
    // 键盘enter操作
    var lett = this
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        lett.handleFilter(this.requestParameters)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  .demo-form-inline {
    padding-left: 10px;
  }
  .alert {
    margin-bottom: 20px;
  }
  .pagination {
    margin-top: 10px;
  }
}
</style>
